import { Button, Card, Drawer, Space, Tag, Typography } from "antd";
import { Iconify } from "@/components/icon";
import parse from "html-react-parser";
import type { TaskItem } from "@/api/services/taskService";
import dayjs from "dayjs";

interface TaskDetailDrawerProps {
	visible: boolean;
	task: TaskItem | null;
	onClose: () => void;
}

const TaskDetailDrawer = ({ visible, task, onClose }: TaskDetailDrawerProps) => {
	if (!task) return null;

	return (
		<Drawer
			open={visible}
			title={
				<div className="flex items-center gap-2">
					<span>任务详情</span>
					{task?.status === 1 && (
						<Tag color="success" className="ml-2">
							可提交
						</Tag>
					)}
				</div>
			}
			onClose={onClose}
			width={800}
			styles={{
				body: {
					backgroundColor: "#f5f5f5",
					padding: "24px",
				},
			}}
			className="task-detail-drawer"
		>
			<div className="space-y-4">
				<Card
					size="small"
					className="shadow-sm"
					title={
						<div className="flex items-center justify-between">
							<Typography.Text strong>基本信息</Typography.Text>
							<Space size={24} className="items-center">
								<Space size={4}>
									<Iconify
										icon="material-symbols:tag"
										className="text-gray-400"
									/>
									<Typography.Text code>{task.id}</Typography.Text>
								</Space>
								<Space size={4}>
									<Iconify
										icon="material-symbols:payments"
										className="text-gray-400"
									/>
									<Typography.Text type="success" strong>
										¥{task.price}
									</Typography.Text>
								</Space>
								{task.attachment && (
									<Button
										type="text"
										className="flex items-center hover:text-primary"
										icon={<Iconify icon="material-symbols:download" />}
										onClick={() => {
											const element = document.createElement("a");
											element.href = task.attachment || "";
											element.download = `任务${task.id}附件${task.attachment?.substring(
												task.attachment.lastIndexOf("."),
											)}`;
											document.body.appendChild(element);
											element.click();
											document.body.removeChild(element);
										}}
									>
										下载附件
									</Button>
								)}
							</Space>
						</div>
					}
				>
					<div className="space-y-4">
						<div>
							<Typography.Title level={4} className="!mb-2">
								{task.title}
							</Typography.Title>
							<Typography.Text type="secondary">
								{dayjs(task.createtime * 1000).format(
									"YYYY-MM-DD HH:mm:ss",
								)}
							</Typography.Text>
						</div>
						<div className="rich-text-content">
							{parse(task.content || "")}
						</div>
					</div>
				</Card>
			</div>
		</Drawer>
	);
};

export default TaskDetailDrawer;
